<template>
  <el-container style="height: 535px;padding: 20px">
    <el-table :data="tableData" max-height="600">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="教师个人简介">
              <span>{{ props.row.jsbz }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="acc" label="教师账号" width="150">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="150">
      </el-table-column>
      <el-table-column prop="sex" label="性别" width="80">
      </el-table-column>
      <el-table-column prop="jsbz" label="教师简介" width="700">
      </el-table-column>
      <el-table-column prop="lxfs" label="手机号" width="150">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot:default="scope">
          <el-popconfirm confirm-button-text='好的'
                         cancel-button-text='不用了'
                         icon="el-icon-info"
                         icon-color="red"
                         @confirm="deleteRow(scope.$index, tableData)"
                         title="确定删除吗？">
            <el-button slot="reference" type="danger" size="mini">移除</el-button>
          </el-popconfirm>
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, tableData)">编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <TeacherEdit ref="edit"></TeacherEdit>
  </el-container>
</template>

<script>
import TeacherEdit from './TeacherEdit'

export default {
  name: 'TeacherTable',
  components: {TeacherEdit},
  data () {
    return {
      visible: false,
      tableData: [{
        id: '',
        acc: '',
        name: '',
        sex: '',
        jsbz: '',
        lxfs: ''
      }]
    }
  },
  methods: {
    handleEdit (index, row) {
      this.$refs.edit.dialogFormVisible = true
      this.$refs.edit.confirmForm = row.at(index)
    },
    deleteRow (index, rows) {
      this.visible = false
      this.$axios.get('admin/notify-manager/' + rows.at(index).id + '/delete').then(resp => {
      }).catch(failResponse => {
        alert('服务器响应请求失败！')
      })
      rows.splice(index, 1)
    }
  },
  mounted () {
    this.$axios.get('admin/teacher_manager/all-info').then(resp => {
      this.tableData = resp.data
    }).catch(failResponse => {
    })
  }
}
</script>

<style scoped>
.el-container {
  padding: 20px 0;
  height: 200px;
  background-color: #FFFFFF;
  border-radius: 15px;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
